<template>
  <div class="mine">
    <!-- -------------- -->
     <div class="demo-fit" >
        <div class="block" v-for="fit in fits" :key="fit">
        <span class="title">{{ fit }}</span>
        <el-avatar shape="square" :size="300" :fit="fit" :src="url"></el-avatar>
        </div>
    </div>
    <!-- -------------- -->
    <el-descriptions
      class="margin-top"
      title="我的中心"  :column="2"
      :size="size"
      border>
      <template slot="extra">
        <el-button type="primary" size="small">操作</el-button>
      </template>


      <!-- ----------- -->
      <el-descriptions-item>
        <template slot="label">
          
          unid
        </template>
        {{this.userInfo.unid}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          
          账号
        </template>
        {{this.userInfo.username}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          
        VIP等级
        </template>
        {{this.userInfo.vipLevel}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          
          vip到期时间
        </template>
        {{this.userInfo.vipExpires}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          
          昵称
        </template>
        {{this.userInfo.nickname}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          
          手机号
        </template>
        {{this.userInfo.phone}}
      </el-descriptions-item>
      
      <el-descriptions-item>
        <template slot="label">
        
          角色名称
        </template>
        {{this.userInfo.roleName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          
          性别
        </template>
        {{this.userInfo.sex}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          
          省份
        </template>
        {{this.userInfo.province}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
        
          城市
        </template>
        {{this.userInfo.city}}
      </el-descriptions-item>
    


    </el-descriptions>
  </div>
</template>

<script>
import {mapState } from "vuex"
  export default {
    computed:{
      ...mapState("users",["userInfo"]),
      url(){
        return this.userInfo?.headimgurl ? this.userInfo?.headimgurl : 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
      },
    },
    meta:{
      title: 'wdzx',
      name:"我的中心",
      icon:"iconfont icon-wode"
    },
    data () {
      return {
        size: '',
        fits: [''],
     
      };
    }
  }
</script>

<style scoped lang="less">
/deep/.el-descriptions__header{
line-height:30px;
}
</style>